<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<script src="../../day07/jquery-1.12.4.min.js" type="text/javascript" charset="utf-8"></script>
		<title></title>
		<style type="text/css">
			input{
				background: #EBEBEB;
				display: inline-block;
				width: 150px;
				height: 50px;
				font-size: 30px;
			}
			div{
				width: 300px;
				height: 300px;
				position: relative;
				top: 50px;
				left: 50px;
				background: pink;
				text-align: center;
				font-size: 80px;
				line-height: 300px;
			}
			.hide{
				display: none;
			}
			.cur{
				background: pink;
			}
		</style>
	</head>
	<body>
		<input type="button"  value="按钮0" class="cur"/>
		<input type="button"  value="按钮1" class="bt1"/>
		<input type="button"  value="按钮2" class="bt2"/>
		<div>
			000000
		</div>
		<div  class="hide">
			111111
		</div>
		<div class="hide">
			222222
		</div>
	</body>
	<script type="text/javascript">		
//		$(".bt0").click(function(){			
//			$(".bt0").css({
//				"background":"pink"
//			});
//		$(".bt1").css({
//				"background":"#EBEBEB"
//		});
//		$(".bt2").css({
//				"background":"#EBEBEB"
//		});		
//		})
//		$(".bt1").click(function(){			
//			$(".bt0").css({
//				"background":"#EBEBEB"
//			});
//		$(".bt1").css({
//				"background":"pink"
//		});
//		$(".bt2").css({
//				"background":"#EBEBEB"
//		});	
//		$(".tn1")
//		})
		$("input").click(function(){			
			$(this).addClass("cur").siblings("input").removeClass("cur");
			$("div").eq($(this).index()).removeClass("hide").siblings("div").addClass("hide")
		})
	</script>
</html>
